<template>
  <div>
    <el-card>
      <!--查询条件表单-->
      <el-form :model="queryInfo.query" :inline="true" class="demo-form-inline" ref="queryInfoRef">
        <el-form-item label="课程名称">
          <el-input v-model="queryInfo.query.title" placeholder="课程名称"></el-input>
        </el-form-item>
        <el-form-item label="课程浏览范围">
          <el-input-number v-model="queryInfo.query.start" :min="0" placeholder="最小浏览量"></el-input-number>
          <el-input-number v-model="queryInfo.query.end" placeholder="最大浏览量"></el-input-number>
        </el-form-item>
        <el-form-item label="是否发布">
          <el-select v-model="queryInfo.query.status" placeholder="课程是否发布">
            <el-option label="已发布" value="Normal"></el-option>
            <el-option label="未发布" value="Draft"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCourseInfoByCondition(1)">查询</el-button>
          <el-button type="warning" @click="clearQueryInfoForm">清空</el-button>
        </el-form-item>
      </el-form>

      <!--数据展示区域-->
      <el-table :data="courseInfoList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="课程名称" prop="title"></el-table-column>
        <el-table-column label="课程状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === 'Normal'">已发布</el-tag>
            <el-tag type="warning" v-else>未发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="课时数" prop="lessonNum"></el-table-column>
        <el-table-column label="浏览数量" prop="viewCount"></el-table-column>
        <el-table-column label="添加时间" prop="gmtCreate"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <router-link :to="'/course/info/' + scope.row.id" class="myRouterLink">
              <el-tooltip class="item" effect="dark" content="编辑课程基本信息" placement="top" :enterable="false">
                <el-button icon="el-icon-edit" circle type="primary"></el-button>
              </el-tooltip>
            </router-link>
            <router-link :to="'/course/chapter/' + scope.row.id" class="myRouterLink">
              <el-tooltip class="item" effect="dark" content="编辑课程大纲" placement="top" :enterable="false">
                <el-button icon="el-icon-success" circle type="primary"></el-button>
              </el-tooltip>
            </router-link>
            <el-tooltip class="item" effect="dark" content="删除课程" placement="top" :enterable="false">
              <el-button icon="el-icon-delete" circle type="danger" @click="deleteCourseAllInfo(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <!--分页显示-->
        <el-col push="8">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import CourseApi from '@/api/edu/course'

  export default {
    name: 'list',
    data() {
      return {
        //查询条件
        queryInfo: {
          pageSize: 5,
          pageNum : 1,
          query: {}
        },

        //课程信息列表
        courseInfoList: [],
        //课程列表的总数量
        total: 0,
      }
    },
    created() {
      this.getCourseInfoByCondition()
    },
    methods: {
      //查询所有的课程信息
      async getAllCourseInfo() {
        const { data } = await CourseApi.getAllCourse()
        this.courseInfoList = data.data
        this.total = data.data.length
      },

      //清空查询表单信息
      clearQueryInfoForm() {
        this.queryInfo.query = {};
        this.getCourseInfoByCondition(1);
      },

      //通过条件查询对应的表单信息
      async getCourseInfoByCondition(page = this.queryInfo.pageNum) {
        this.queryInfo.pageNum = page;
        const {data} = await CourseApi.getCourseByCondition(this.queryInfo.pageSize,this.queryInfo.pageNum,this.queryInfo.query);
        this.courseInfoList = data.data;
        this.total = data.total;
      },

      //处理每页数量改变的问题
      handleSizeChange(newSize){
        this.queryInfo.pageSize = newSize;
        this.getCourseInfoByCondition();
      },

      //处理页码改变的事件
      handleCurrentChange(newPage){
        this.queryInfo.pageNum = newPage;
        this.getCourseInfoByCondition();
      },

      //删除课程的所有信息
      async deleteCourseAllInfo(id){
        const result = await this.$confirm('您确认要删除该课程所有信息嘛','提示',{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(e => e);
        if (result === 'cancel') return this.$message.info('取消删除');
        await CourseApi.deleteCourseAllInfo(id);
        this.getCourseInfoByCondition();
        this.$message.success('删除成功');
      },
    }
  }
</script>

<style scoped>
.myRouterLink{
  margin-right: 15PX;
}
  .el-pagination{
    margin-top: 15px;
  }
</style>
